<template>
  <div class="login-container">
    <div class="login-box animated bounceIn">
      <h2>登录</h2>
      <a-form @finish="onSubmit" layout="vertical" class="login-form">
        <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
          <a-input
            v-model:value="form.username"
            placeholder="请输入用户名"
            allow-clear
            class="animated-input"
          />
        </a-form-item>
        <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
          <a-input-password
            v-model:value="form.password"
            placeholder="请输入密码"
            class="animated-input"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" block class="animated-button">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { message } from "ant-design-vue";

const form = reactive({
  username: "",
  password: "",
});

const onSubmit = () => {
  if (form.username && form.password) {
    message.success("登录成功！");
    console.log("用户名:", form.username, "密码:", form.password);
  } else {
    message.error("请填写完整信息！");
  }
};
</script>

<style scoped>
/* 背景样式 */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
 /* background: linear-gradient(135deg, #6a11cb, #2575fc);*/
  background-image: url(image/login-bg.jpg);
  background-size: 400% 400%;
  animation: gradient-animation 8s ease infinite;
  font-family: Arial, sans-serif;
}

/* 动画效果 */
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(-100px);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 登录框样式 */
.login-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 350px;
  animation: bounceIn 1.2s;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.login-form {
  margin-top: 20px;
}

a-button {
  border-radius: 5px;
}

/* 输入框动画效果 */
.animated-input {
  border-radius: 5px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.animated-input:hover {
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
  transform: translateY(-2px);
}

/* 按钮动画效果 */
.animated-button {
  border-radius: 5px;
  transition: transform 0.2s ease, background-color 0.3s ease;
}

.animated-button:hover {
  background-color: #5a0dc7;
  transform: translateY(-3px);
}

.animated-button:active {
  transform: scale(0.95);
}
</style>
